<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="http://www.kuibutech.com/wechatAuth/css/weui.css">
    <title>燃烧,照亮他人</title>
</head>

<style type="text/css">
    .head {
        position: fixed;
        left: 0px;
        top: 0px;
        background-color: #ffffff;
        width: 100%;
        height: 2.6rem;
        vertical-align: middle;
        z-index: 100;
        border-bottom: solid 1px #E5E5E5;
    }

    .tip {
        margin-top: 4rem;
        color: #9B9B9B;
        font-size: 14px;
        margin-left: 15px;
    }

    .submit {
        margin-top: 20px;
        width: 96%;
        margin-left: 2%;
        margin-bottom: 20px;
    }

    .record {
        width: 100%;
        margin-top: 10px;
    }

    .weui_input {
        font-size: 14px;
    }

    .weui_textarea {
        font-size: 14px;
    }
</style>

<script type="text/javascript">
    function add_record() {
        $('#record_dialog').show();
    }

    function check_add_record_item(record_hour, record_minute, record_second) {
        // 检查记录是否数据都填写
        if (record_hour == '') {
            $('#label_hour').css('color', 'red');
            $('#record_add_title').text('您有信息未填写');
            $('#record_add_title').css('color', 'red');
            return false;
        }

        if (record_minute == '') {
            $('#label_minute').css('color', 'red');
            $('#record_add_title').text('您有信息未填写');
            $('#record_add_title').css('color', 'red');
            return false;
        }

        if (record_second == '') {
            $('#label_second').css('color', 'red');
            $('#record_add_title').text('您有信息未填写');
            $('#record_add_title').css('color', 'red');
            return false;
        }

    }

    function complete_add_record() {
        // 确定添加成绩信息
        var record_type_val = $('#record_type option:selected').val();
        var record_type_text = $('#record_type option:selected').text();
        var record_hour = $('#record_hour').val();
        var record_minute = $('#record_minute').val();
        var record_second = $('#record_second').val();

        var result = check_add_record_item(record_hour, record_minute, record_second);
        if (result == false) {
            return;
        }

        var record_html = "<div class=\"weui_cell\">" +
                "<div class=\"weui_cell_bd weui_cell_primary\">" +
                "<p>" + record_type_text + "</p>" + "</div> " +
                "<div class=\"weui_cell_ft\">" + record_hour + "时" + record_minute + "分" + record_second + "秒" + "</div>" +
                "</div>";

        $.post('/wechatAuth/record/add/', {
            'record_type': record_type_text,
            'record_hour': record_hour,
            'record_minute': record_minute,
            'record_second': record_second
        }, function (data) {
            if (data.result == true) {
                $('#records').append(record_html);
                $('#record_hour').val('');
                $('#record_minute').val('');
                $('#record_second').val('');
            }
        });

        $('#record_dialog').hide();
        return;
    }

    function submit_form() {
        $('#form').submit();
    }
</script>

<body>

<div class="head">
    <div style="float: left;width: 33%;margin-top: 10px">
        <a href="javascript:history.back()"
           style="color: #04BE02;font-size: 17px;margin-left: 15px">返回</a>
    </div>
    <div style="float: left;width: 33%;text-align: center;margin-top: 10px">
        <label style="">修改名片</label>

    </div>
    <div style="float: left;width: 33%;margin-top: 10px;text-align: right">
        <a href="/wechatAuth/route/gotoMain" style="color: #04BE02;font-size: 17px;margin-right: 13px">主页</a>
    </div>
</div>

<div class="tip">
    <label>名片是给大家的第一印象</label>
</div>

<form id="form" method="post" action="/wechatAuth/user/editUserInfo/">

    <div class="weui_cells weui_cells_form">
        <div class="weui_cell">
            <div class="weui_cess_hd">
                <label class="weui_label">大学/公司</label>
            </div>

            <div class="weui_cell_bd weui_cell_primary">
                <input name="college" class="weui_input" type="text" placeholder="填写自己的大学"
                       <c:if test="${user_info.college!=''}">value="${user_info.college}" </c:if>>
            </div>
        </div>

        <div class="weui_cell">
            <div class="weui_cess_hd">
                <label id="wechat" class="weui_label">微信号</label>
            </div>

            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" name="wechatAccount" type="text" placeholder="必填 (别人加你,可以拒绝哦)"
                       <c:if test="${user_info.wechatAccount!=''}">value="${user_info.wechatAccount}" </c:if>>
            </div>
        </div>

        <div class="weui_cell">
            <div class="weui_cess_hd">
                <label class="weui_label">手机号</label>
            </div>

            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" name="telnumber" type="number" pattern="[0-9]*" placeholder="不公开，方便用户管理"
                       <c:if test="${user_info.telnumber!=''}">value="${user_info.telnumber}" </c:if>>
            </div>
        </div>

        <div class="weui_cell">
            <div class="weui_cess_hd">
                <label class="weui_label">QQ号</label>
            </div>

            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" name="invite" type="number" placeholder="填写QQ号"
                       <c:if test="${user_info.invite!=''}">value="${user_info.invite}" </c:if>>
            </div>
        </div>

        <div class="weui_cell weui_cell_select weui_select_after">
            <div class="weui_cell_hd">
                <label class="weui_label" style="color: black">常用跑步App</label>
            </div>
            <div class="weui_cell_bd weui_cell_primary">
                <select class="weui_select" name="runapp">
                    <option value="咕咚" <c:if test="${user_info.runapp==''||user_info.runapp=='咕咚'}">selected</c:if>>咕咚</option>
                    <option value="悦跑圈" <c:if test="${user_info.runapp=='悦跑圈'}">selected</c:if>>悦跑圈</option>
                    <option value="乐动力" <c:if test="${user_info.runapp=='乐动力'}">selected</c:if>>乐动力</option>
                    <option value="虎扑跑步" <c:if test="${user_info.runapp=='虎扑跑步'}">selected</c:if>>虎扑跑步</option>
                    <option value="悦动圈" <c:if test="${user_info.runapp=='悦动圈'}">selected</c:if>>悦动圈</option>
                    <option value="行者" <c:if test="${user_info.runapp=='行者'}">selected</c:if>>行者</option>
                    <option value="其他" <c:if test="${user_info.runapp=='其他'}">selected</c:if>>其他</option>
                </select>
            </div>
        </div>

        <div class="weui_cells">
            <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <div class="weui_uploader">
                        <div class="weui_uploader_bd">
                        <textarea class="weui_textarea" name="slogan" placeholder="个性签名,30字以内哦" rows="3"><c:if
                                test="${user_info.slogan!=''}">${user_info.slogan}</c:if></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<div class="weui_cells_title" style="margin-top: 20px;color: #9B9B9B">运动成绩</div>
<div id="records" class="weui_cells">
    <c:forEach items="${records}" var="record">
        <div class="weui_cell">
            <div class="weui_cell_bd weui_cell_primary">
                <p>${record.type}</p>
            </div>
            <div class="weui_cell_ft">${record.hour}时${record.minute}分${record.second}秒</div>
        </div>
    </c:forEach>
</div>

<div class="record">
    <button onclick="add_record()" style="width: 94%;margin-left: 3%" class="weui_btn weui_btn_plain_primary">添加成绩
    </button>
</div>


<div class="submit">
    <button onclick="submit_form()" class="weui_btn weui_btn_primary">确定修改</button>
</div>


<div class="weui_dialog_alert" id="record_dialog" hidden>
    <div class="weui_mask"></div>
    <div class="weui_dialog">
        <div class="weui_dialog_hd"><strong id="record_add_title" class="weui_dialog_title">输入成绩信息</strong></div>
        <div class="weui_dialog_bd">
            <div class="weui_cell weui_cell_select weui_select_after">
                <div class="weui_cell_hd">
                    <label class="weui_label" style="color: black">挑战类型</label>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <select id="record_type" class="weui_select" name="select2">
                        <option value="1">1公里</option>
                        <option value="3">3公里</option>
                        <option value="5">5公里</option>
                        <option value="7">7公里</option>
                        <option value="10">10公里</option>
                        <option value="15">半马</option>
                        <option value="30">全马</option>
                    </select>
                </div>
            </div>

            <div class="weui_cell">
                <div class="weui_cess_hd">
                    <label id="label_hour" class="weui_label" style="color: black">小时</label>
                </div>

                <div class="weui_cell_bd weui_cell_primary">
                    <input id="record_hour" class="weui_input" type="number" pattern="[0-9]*" placeholder="0">
                </div>
            </div>

            <div class="weui_cell">
                <div class="weui_cess_hd">
                    <label id="label_minute" class="weui_label" style="color: black">分钟</label>
                </div>

                <div class="weui_cell_bd weui_cell_primary">
                    <input id="record_minute" class="weui_input" type="number" pattern="[0-9]*" placeholder="0">
                </div>
            </div>

            <div class="weui_cell">
                <div class="weui_cess_hd">
                    <label id="label_second" class="weui_label" style="color: black">秒</label>
                </div>

                <div class="weui_cell_bd weui_cell_primary">
                    <input id="record_second" class="weui_input" type="number" pattern="[0-9]*" placeholder="0">
                </div>
            </div>

        </div>
        <div class="weui_dialog_ft">
            <a href="javascript:complete_add_record();" class="weui_btn_dialog primary">确定</a>
        </div>
    </div>
</div>


<!--引入Jquery文件-->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>